<template>
  <div class="zt">
   <div class="find_top">
      <div class="seek"><img src="../../images/icon-faxian-search.png" alt=""></div>
      <div class="sponsor">
      <router-link to="sponsor">
          <img src="../../images/icon-faxian-@.png" alt="">
      </router-Link>
      </div>
      
      <h1>发现</h1>
   </div>
   <div class="demo">
      <div class="content">

      <router-link to="topics">
        <div class="topic">
          <img src="../../images/IMG_yingdaoye2_01.png" alt="">
          <p>最火话题</p>
        </div>
      </router-link>  

        <router-link to="beauty">
          <div class="topic">
            <img src="../../images/IMG_yingdaoye2_02.png" alt="">
            <p>最美达人</p>
          </div>
        </router-link>   

        <router-link to="commodity">
        <div class="commodity">
          <img src="../../images/IMG_yingdaoye2_02-03.png" alt="">
          <p>最热商品</p>
        </div>
        </router-link>
      </div>
   </div>
  
   <div class="main" v-for="(item,index) in listdata" :key ='index'>
      <h3>{{item.title}}</h3>
      <p>{{item.topic}}个话题 | {{item.comment}}人热议</p>
      <div class="img-content">
        <template v-for="(itemimg,index) in item.img">
          <img :src="itemimg" alt="">
        </template>
      </div>
   </div>
 <!--   <div class="main">
      <h3>彩妆界的奢侈品————Dior</h3>
      <p>293个话题 | 34869人热议</p>
      <div class="img-content">
        <img src="../../images/IMG_yingdaoye2_04.png" alt="">
        <img src="../../images/IMG_yingdaoye2_05.png" alt="">
      </div>
   </div> -->
   
   
   
   <Bottomnav :navflag2='navflag'></Bottomnav>
  </div>
</template>
<script>
import Bottomnav from "../../components/bottomnav"
export default {
  name:'findex',
  data(){
      return{
        listdata : [],
        navflag:true
      }
  },
  components:{
      Bottomnav
  },
  created(){
    this.$http.get(this.$store.state.host+'/love/find/itemlist').then(res=>{
      this.listdata = res.data
    })
  }
}
</script>
<style lang="less" scoped>

.zt{
  position:relative;
  text-align: center;
  
}
body{
  background:#fff;
}
.find_top{
  width:100%;
  height:306/75rem;
  background:#ff406f;
  margin-bottom:240/75rem;
    h1{
      color:#fff;
      font-size:40/75rem;
      padding-top:36/75rem;
    }

    .seek{
      float:left;
      margin-left:20/75rem;
      padding-top:20/75rem;
      
    }

    .sponsor{
      float:right;
      margin-right:20/75rem;
      padding-top:20/75rem;
    }
}

.demo{
  position:absolute;
  width:714/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 5px -5px 50px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;

  .content{
    width:670/75rem;
    height:304/75rem;
    margin:0 auto;
    // background:red;
    margin-top:18/75rem;
    
    
    img{
      width:208/75rem;
      height:260/75rem;
    }

    p{
      font-size:30/75rem;
      color:#ff3865;
    }


    .topic{
      float:left;
      margin-right:22/75rem;
    }

    .commodity{
      float:right;
    }
  }
}

.main{
  width:714/75rem;
  height:466/75rem;
  border-radius:16/75rem;
  box-shadow: 5px 0px 30px #888888;
  background:#fff;
  margin:50/75rem auto;
  
  h3{
    padding-top:40/75rem;
    font-size:28/75rem;
  }
  p{
    font-size:16/75rem;
    margin-top:16px;
  }

  .img-content{
    width:632/75rem;
    height:314/75rem;
    margin:20/75rem auto;
    
    img{
      width:266/75rem;
      height:302/75rem;
    }
  }
  
}

</style>
